<template>
	<view>
		<view class="toast-view" v-if="toast_show">
			<view class="toast-bg">
				<image src="@/static/images/success.png" class="ioc"></image>
				<text class="text" v-if="text01">{{text01}}</text>
				<text class="text" v-if="text02">{{text02}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				toast_show: false,
				text01: "",
				text02: "",
			}
		},
		methods: {
			show(text01, text02) {
				this.text01 = text01
				this.text02 = text02
				this.toast_show = true
				setTimeout(() => {
					this.toast_show = false
					this.text01 = ""
					this.text02 = ""
				}, 1600)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toast-view {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.toast-bg {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: rgba(0, 0, 0, 0.7);
			border-radius: 16rpx;
			padding: 20rpx 30rpx 36rpx;
			min-width: 320rpx;
			margin-bottom: 50rpx;
			opacity: 0;
			animation: fadeIn 200ms ease-in-out forwards;

			.ioc {
				width: 78rpx;
				height: 78rpx;
				margin-bottom: 16rpx;
			}

			.text {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}

		/* 定义淡出动画 */
		@keyframes fadeIn {
			from {
				/* 动画开始时 */
				opacity: 0;
				/* 完全不透明 */
			}

			to {
				/* 动画结束时 */
				opacity: 1;
				/* 完全透明 */
			}
		}
	}
</style>